<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<style>
			div{
				width:50px;
				height:50px;
				float: left;
				margin-left:30px;
			}
		</style>
	</head>
		
	<body>
		<div style="background: red;"></div>
		<div style="background: purple;"></div>
		<div style="background: yellow;"></div>
	</body>
	<script>
		var body=document.getElementsByTagName('body')[0]
		var box=document.getElementsByTagName('div')
		for(let i=0; i<box.length; i++){
			box[i].onclick=function(){
				if(i==0){
					body.style.background="green"
				}else if(i==1){
					body.style.background="orange"
				}else if(i==2){
					body.style.background="cyan"
				}
			}
		}
	</script>
</html>
